<template>
    <div class="map">
        <One v-if="showOne"/>
        <Two v-else-if="showTwo"/>
        <Three v-else/>
        <div class="btn">
          <div class="btnC"  :style="{background:showOne?'#0c215b':'',color:showOne?'#fff':''}"  @click="showChange(1)">网络本层 </div>
          <div class="btnC"  :style="{background:showTwo?'#0c215b':'',color:showTwo?'#fff':''}"  @click="showChange(2)">网络拓扑 </div>
          <div class="btnC" :style="{background:showThree?'#0c215b':'',color:showThree?'#fff':''}"  @click="showChange(3)">网络资产 </div>
      </div>
    </div>
    <!-- <div id="map" class="map">
      <TyphoonInfo
        ref="typhoonInfo"
        :closeInfo="this.closeInfo"
        :typhoonData="typhoonData"
      />
      <div class="btn">
          <div >网络拓扑 </div>
          <div >资产拓扑 </div>
      </div>
  
    </div> -->
  </template>
  
  <script>
import One from './openlayersMapThree.vue'
import Two from './openlayersMapThreeNet.vue'
import Three from './openlayersMapThreeAssets.vue'
  export default {
    name: "HelloWorld",
    components: {
        One,Two,Three
    },
    data() {
      return {
      showOne:true,
      showTwo:false,
      showThree:false
      };
    },
  
    mounted() {
   ;
    },
    methods: { 
        showChange(data){
            if(data===2){
                this.showOne =false;
                this.showTwo =true;
                this.showThree =false;
            }else if(data===3){
                this.showOne =false;
                this.showTwo =false;
                this.showThree =true;
            }else if(data===1){
                
                this.showOne =true;
                this.showTwo =false;
                this.showThree =false;
            }
        },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .map {
    width: 100%;
    height: 100%;
    position: relative; /* 确保地图是一个定位上下文 */
    z-index: 0; /* 地图的z-index值，可以根据需要调整 */
  }
  .btn {
    border: 2px solid #5e74b5;

    position: absolute; /* 将按钮定位到地图上方 */
    top: 10px; /* 按钮距离顶部的距离，可以根据需要调整 */
    right: 10px; /* 按钮距离右侧的距离，可以根据需要调整 */
    z-index: 1; /* 确保按钮的z-index高于地图 */
    .btnC{
        height: 30px;
        color: #5e74b5;
        line-height: 30px;
        border-bottom: 1px solid #1890ff;
        padding: 5px;
        cursor: pointer;
    }
  }
  </style>
  